<template>
  <div class="chart" :id="id" width="400px"></div>
</template>

<script>
import mixins from '@/utils/mixins'
export default {
  name: "colBar",
   mixins: [mixins],
  props: {
    id: {
      type: String,
      default: "",
    },
    title: {
      type: String,
      default: "",
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    yAxisData: {
      type: Array,
      default: () => [],
    },
    seriesData: {
      type: Array,
      default: () => [],
    },
  },
  computed: {
    getOption() {
      let option = {
        color: "#f68258",
        title: {
          text: this.title,
          textStyle: {
            fontSize: (this.title=='推文类型' || this.title=='推文语言')?14:18,
            color: "#eee",
          },
        },
        tooltip: {
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "0%",
          right: "8%",
          bottom: "0%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          axisLine: false,
          splitLine: {
            show: false,
          },
        },
        yAxis: {
          type: "category",
          data: this.yAxisData,
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            color: "#B8BECC",
          },
        },
        series: [
          {
            type: "bar",
            label: {
              show: true,
              position: "right",
              formatter: "{c}人",
            },
            data: this.seriesData,
            barWidth:14,
            itemStyle:{
              barBorderRadius:[0 ,5 ,5 ,0]
            }
          },
        ],
      };

      return option;
    },
  },
  mounted() {
    const options = this.getOption;
    if (options) {
      this.myCharts = this.$echarts.init(document.getElementById(this.id));
      this.myCharts.setOption(options);
      this.handleResize(this.myCharts);
    }
  },
  beforeDestroy() {
    this.myCharts.clear();
  },
  watch: {
    getOption: {
      handler: function(nval) {
        this.myCharts.setOption(nval);
      },
      deep: true,
    },
  },
};
</script>

<style lang="scss" scoped>
.chart {
  width: 400px;
  height: 310px;
}
</style>
